/* eslint-disable no-unused-vars */
/* eslint-disable react/prop-types */
import React from 'react';
import { Form, Input, Button, Icon, Row, Col } from 'antd';
import '../../mysite.scss';
import uuid from 'react-uuid'
import Api from '@/api/index';
import { withRouter } from 'react-router-dom';
import { message } from 'antd';
const { TextArea } = Input;
const formItemLayout = {
    labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
    },
    wrapperCol: {
        xs: { span: 24 },
        sm: { span: 19 },
    },
};
const formItemLayoutWithoutLabel = {
    wrapperCol: {
        xs: {
            span: 24,
            offset: 0,
        },
        sm: {
            span: 20,
            offset: 4,
        },
    },
};
const tailFormItemLayout = {
    wrapperCol: {
        xs: {
            span: 24,
            offset: 0,
        },
        sm: {
            span: 16,
            offset: 4,
        },
    },
};
class DictForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            keys: [
                { name: null, value: null, id: uuid() }
            ]
        }
    }

    handleSubmit = e => {
        e.preventDefault();
        this.props.form.validateFieldsAndScroll((err, values) => {
            if (!err) {
                const { dictList, keys, ...other } = values;
                let array = [];
                for (let k in dictList) {
                    array.push(dictList[k])
                }
                Api.createDict({ ...other, dictList: array }).then(res => {
                    if (res.code == 200) {
                        message.success('保存成功')
                        this.props.history.push({ pathname: '/system/dict' })
                    }
                })
            }
        });
    };
    //删除
    remove = (k) => {
        const { form } = this.props;
        let keys = form.getFieldValue('keys');
        form.setFieldsValue({ keys: keys.filter(item => item != k) })
    }
    //增加
    add = () => {
        const { form } = this.props;
        let keys = form.getFieldValue('keys');
        const nextKeys = keys.concat(uuid());
        form.setFieldsValue({ keys: nextKeys });
    }


    render() {
        const { getFieldDecorator, getFieldValue } = this.props.form;
        getFieldDecorator('keys', { initialValue: [] });
        const keys = getFieldValue('keys');

        const formItems = keys.map((k, index) => {
            return (<Form.Item key={k} {...formItemLayoutWithoutLabel}>
                <Row>
                    <Col span={10}>
                        <Form.Item
                            label={'对象'}
                            key={k}
                            {...formItemLayout}
                            style={{ marginBottom: 0 }}
                        >
                            {getFieldDecorator(`dictList[${k}]['key']`, {
                                validateTrigger: ['onChange', 'onBlur'],
                                rules: [
                                    {
                                        required: true,
                                        whitespace: true,
                                        message: "请输入对象名称",
                                    },
                                ],
                            })(<Input placeholder="对象名称" />)}
                        </Form.Item>
                    </Col>
                    <Col span={10}>
                        <Form.Item
                            label={'数值'}
                            key={k}
                            {...formItemLayout}
                            style={{ marginBottom: 0 }}
                        >
                            {getFieldDecorator(`dictList[${k}]['value']`, {
                                validateTrigger: ['onChange', 'onBlur'],
                                rules: [
                                    {
                                        required: true,
                                        whitespace: true,
                                        message: "请输入数值",
                                    },
                                ],
                            })(<Input placeholder="数值" />)}
                        </Form.Item>
                    </Col>
                    <Col span={4}>
                        {keys.length > 1 ? (
                            <Icon
                                className="icon_item"
                                type="minus-circle-o"
                                onClick={() => this.remove(k)}
                            />
                        ) : null}
                    </Col>
                </Row>
            </Form.Item>);
        })

        return (
            <Form {...formItemLayout} onSubmit={this.handleSubmit} >
                <Form.Item label="字典名称">
                    {getFieldDecorator('name', {
                        rules: [
                            {
                                required: true,
                                message: '请输入字典名称',
                            },
                        ],
                    })(<Input placeholder="字典名称" />)}
                </Form.Item>
                <Form.Item label="描述">
                    {getFieldDecorator('description', {})(<TextArea row={4} />)}
                </Form.Item>
                <Form.Item label="字典数据">
                    <Button type="primary" onClick={this.add} ghost>
                        <Icon type="plus" />添加
                </Button>
                </Form.Item>
                {formItems}
                <Form.Item {...tailFormItemLayout} style={{ marginTop: '30px', textAlign: 'center' }}>
                    <Button className="submit_btn" type="default">取消</Button>
                    <Button className="submit_btn" type="primary" htmlType="submit">确定</Button>
                </Form.Item>
            </Form>
        );
    }
}

export default Form.create()(withRouter(DictForm));


